import React, { useState, useEffect } from 'react';
import { Card, Form, Table, Button, Input, message } from 'antd';
import { PlusOutlined, SearchOutlined } from '@ant-design/icons';
import { usersDataAPI, usersDelDataAPI } from '../../api/users';
import { formatDateToChinese } from '../../utils';

interface UList {
  id?: string;
  userName?: string;
  password?: string;
  avatar?: string;
  nickName?: string;
  createdAt?: string;
  updatedAt?: string;
  address?: string;
  mobile?: string;
}

//用户信息页面
const User: React.FC = () => {
  //用户信息的数据
  const [list, setList] = useState<UList[]>([]);
  //加载状态
  const [loading, setLoading] = useState(true);
  //查询条件
  const [query, setQuery] = useState({
    page: 1,
    pageSize: 10,
    name: '',
  });

  //分页获取数据&&查询
  useEffect(() => {
    usersDataAPI(query).then((res) => {
      setList(res.data.list);
      setLoading(false);
    });
  }, [query]);

  return (
    <div className='wrap'>
      <Card
        title='用户信息' //卡片标题
        style={{ background: '#f0f2f5' }}
        bordered={true} //是否展示边框
        hoverable={true} //鼠标悬浮时是否展示阴影
        type='inner' //卡片类型
      >
        <Form
          layout='inline'
          style={{ marginBottom: '20px' }}
          //提交表单且数据验证成功后回调事件
          onFinish={(v) => {
            console.log(v);
            setQuery({ ...query, name: v.userName, page: 1 });
          }}
        >
          <Form.Item label='用户名' name='userName'>
            <Input placeholder='请输入用户名查询' />
          </Form.Item>
          <Form.Item>
            <Button
              type='primary'
              htmlType='submit'
              icon={<SearchOutlined />}
            ></Button>
          </Form.Item>
        </Form>
        <Table
          dataSource={list} //数据源
          rowKey={'id'} // 表格行 key 的取值
          loading={loading} //页面是否加载中
          bordered={true} //是否展示外边框和列边框
          columns={[
            {
              title: '序号',
              width: 80,
              align: 'center',
              render: (text, record, index) => {
                return index + 1;
              },
            },
            {
              title: '用户名',
              dataIndex: 'userName',
              align: 'center',
            },
            {
              title: '创建时间',
              dataIndex: 'createdAt',
              render: (text) => {
                return formatDateToChinese(text);
              },
              align: 'center',
            },
            {
              title: '操作',
              align: 'center',
              width: 200,
              render: (text, record) => {
                return (
                  <>
                    <Button
                      type='primary'
                      danger
                      onClick={async () => {
                        await usersDelDataAPI(text.id);
                        setQuery({ ...query });
                        message.error('服务端删除接口没完成');
                      }}
                    >
                      删除
                    </Button>
                  </>
                );
              },
            },
          ]}
        ></Table>
      </Card>
    </div>
  );
};

export default User;
